import React, { useState, useEffect } from 'react';
import axios from 'axios'; // 如果需要使用 AJAX，可以使用 axios 进行请求
import "./usertable.css";
import ModifyUserMessage from './modifyUserMessage';


function UserTable() {
  const [users, setUsers] = useState([]);


  useEffect(() => {
    fetchUsers();
  }, []); // 使用空数组作为第二个参数，以确保useEffect仅在组件挂载时执行

  const fetchUsers = async () => {
    try {
      const response = await axios.get('http://192.168.61.84:8000/user/v1/user/list?pn=1',{
        headers:{ //头部参数
            x_token:localStorage.getItem("token")
        }
    })
    console.log(response.data.users)
    var result = []//reasult接收用户列表
    for(var i = 1;i <= response.data.users.length -1;i++){
      result[i - 1] = response.data.users[i]
    }
      console.log(result)
      setUsers(result);//渲染用户列表
    } catch (error) {
      console.error('Error fetching users:', error);
    }
  };

  const handleDelete = async (userID) => {
    // 实现删除用户的逻辑，这里仅给出示例代码，具体实现需要根据后端 API 来编写
    try {
      // 发送删除用户请求
      await axios.delete('http://192.168.61.84:8000/user/v1/user/deleteuser',{
        headers:{ //头部参数
            x_token:localStorage.getItem("token")
        }
    });
      // 成功后更新状态或重新获取用户列表
    } catch (error) {
      //输出错误
      console.error('Error deleting user:', error);
    }
  };


  return (
    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>身份</th>
            <th>角色ID</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {users.map((user) => (
            
            <tr key={user.userId}>
              <td>{user.userId}</td>
              <td>{user.userName}</td>
              <td>{user.phone}</td>
              <td>{user.identify}</td>
              <td>{user.roleID}</td>
              <td>
                <span style={{ display: 'inline-block', marginRight: '10px' }}>
                  <button style={{ width: 70, height: 40 }} onClick={() => handleDelete(user.ID)}>删除</button>
                </span>
                <span style={{ display: 'inline-block', marginRight: '10px' }}>
                  <ModifyUserMessage user={user} userID={user.userId} />
                </span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default UserTable;